<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>课程设置</el-breadcrumb-item>
      <el-breadcrumb-item>选课管理</el-breadcrumb-item>
    </el-breadcrumb>

    <hr />

    <el-card>
      <!-- 搜索区域 -->
      <el-row :gutter="20">
        <el-col :span="7">
          <el-input
            v-model="queryInfo.curBy"
            placeholder="请输入授课人姓名"
            clearable
          >
            <template slot="prepend">授课人姓名</template>
          </el-input>
        </el-col>

        <el-col :span="7">
          <el-input
            v-model="queryInfo.curName"
            placeholder="请输入课程名称"
            clearable
          >
            <template slot="prepend">课程名称</template>
          </el-input>
        </el-col>

        <el-col :span="3">
          <el-button type="primary" @click="getCurList">查询</el-button>
        </el-col>
      </el-row>

      <!-- 用户列表区域 -->
      <el-table :data="curList" border stripe style="width: 100%">
        <el-table-column
          prop="curId"
          label="课程编号"
          width="100px"
        ></el-table-column>
        <el-table-column
          prop="curName"
          label="课程名"
          sortable
        ></el-table-column>
        <el-table-column prop="curBy" label="授课人"></el-table-column>
        <el-table-column prop="curAddress" label="授课地点"></el-table-column>
        <el-table-column prop="isPub" label="是否必修" align="center">
          <template slot-scope="scope">
            <el-tag type="info" v-if="scope.row.isPub == '1'">
              必修课程
            </el-tag>
            <el-tag type="warning" v-if="scope.row.isPub == '0'">
              选修课程
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <!-- 修改 -->
            <el-button
              type="primary"
              size="mini"
              plain
              icon="el-icon-setting"
              @click="showDialog(scope.row.curId)"
              >设置</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="queryInfo.page"
        :page-size="queryInfo.size"
        layout="total, prev, pager, next"
        :total="totalPage"
        background
      >
      </el-pagination>
    </el-card>

    <!-- 设置对话框 -->
    <el-dialog title="选课设置" :visible.sync="setDialogVisible" width="width">
      <el-form ref="editRef" :model="editForm" label-width="100px">
        <el-form-item label="剩余空位" v-if="editForm.isPub == '0'">
          <el-input-number
            v-model="editForm.emptyNum"
            :min="0"
            :max="200"
            label="描述文字"
          ></el-input-number>
        </el-form-item>

        <el-form-item
          label="上课班级"
          prop="pubCurs"
          v-if="editForm.isPub == '1'"
        >
          <div v-if="clsList[0] !== null">
            <el-tag
              v-for="item in clsList"
              :key="item.deptId"
              closable
              :disable-transitions="false"
              @close="handleClose(item)"
            >
              {{ item.deptName }}
            </el-tag>
          </div>
          <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          >
          </el-input>
          <el-button
            v-else
            class="button-new-tag"
            size="small"
            @click="showInput"
            >+ 输入班级编号</el-button
          >
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="setDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editSub">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      curList: [],
      queryInfo: {
        page: 1,
        size: 10,
        curBy: '',
        curName: ''
      },
      totalPage: 0,
      editForm: {
        curId: '',
        emptyNum: 0,
        isPub: ''
      },
      setDialogVisible: false,
      // 标签添加输入框
      inputVisible: false,
      inputValue: '',
      clsList: []
    }
  },
  created() {
    this.getCurList()
  },
  methods: {
    async getCurList() {
      const { data: res } = await this.$http.get('cur/list', {
        params: this.queryInfo
      })
      if (res.code !== 20000) {
        return this.$message.error('获取列表信息失败')
      }
      this.curList = res.data.list
      this.totalPage = res.data.total
    },
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage
      this.getCurList()
    },
    async showDialog(id) {
      const { data: res } = await this.$http.get('cur/one/' + id)
      if (res.code !== 20000) {
        return this.$message.error('查询失败!')
      }
      this.editForm = res.data
      this.clsList = res.data.clsList
      this.setDialogVisible = true
    },
    editSub() {
      if (this.editForm.isPub === '0') {
        this.$refs.editRef.validate(async valid => {
          if (!valid) return
          const { data: res } = await this.$http.put(
            'cur/update',
            this.editForm
          )
          if (res.code !== 20000) {
            return this.$message.error('修改失败!')
          }
          this.getCurList()
          this.setDialogVisible = false
          return this.$message.success('修改成功')
        })
      } else {
        this.setDialogVisible = false
      }
    },
    handleClose(item) {
      this.delCurAndCls(item.deptId)
      this.clsList.splice(this.clsList.indexOf(item), 1)
    },
    async delCurAndCls(id) {
      const { data: res } = await this.$http.delete(
        'cur/delCls/' + id + '/' + this.editForm.curId
      )
      if (res.code !== 20000) {
        return this.$message.error('删除错误!')
      }
      return this.$message.success('删除成功')
    },
    showInput() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleInputConfirm() {
      var inputValue = this.inputValue
      this.addClsById(inputValue)
      this.inputVisible = false
      this.inputValue = ''
    },
    async addClsById(id) {
      if (!id) return
      if (isNaN(id * 1)) {
        return this.$message.error('输入有误!')
      }
      const { data: res } = await this.$http.post(
        'cur/addCls/' + id,
        this.editForm
      )
      if (res.code === 20005) {
        return this.$message.error('重复添加!')
      } else if (res.code === 20006) {
        return this.$message.error('未找到班级!')
      }
      this.clsList.push(res.data)
      if (this.clsList.length <= 2) {
        this.setDialogVisible = false
      }
      return this.$message.success('添加成功')
    }
  }
}
</script>

<style lang="less" scoped>
.el-col {
  line-height: 40px;
}

.el-row {
  margin-bottom: 10px;
  text-align: left;
}

.el-form-item {
  text-align: left;
}
</style>
